<!doctype html>
<html lang="zh-CN">
<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">
    <meta name="baidu-site-verification" content="dIcXMeY8Ya">
    
    <title>自定义指令 | 墨染红尘</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="keywords" content="三更编程, JAVA, 算法, 后端开发">
    <meta name="description" content="菜豆个人博客">

    
    <link rel="alternative" href="/atom.xml" title="墨染红尘" type="application/atom+xml">
    
    
    <link rel="shortcut icon" href="/blog/logo.png">
    
    <link rel="stylesheet" href="/blog/css/style.css">
    <!--[if lt IE 9]>
    <script src="/blog/js/html5.js"></script>
    <![endif]-->
    
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?fd459238242776d173cdc64918fb32f2";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>


</head>
</html>
<body class="home">
    <!--[if lt IE 9]>
    <div class="browsehappy">
        当前网页 <strong>不支持</strong>
        你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/">升级你的浏览器</a>.
    </div>
    <![endif]-->

    <!-- 博客头部 -->
    <header class="header">
    <section class="container header-main">
        <div class="logo">
            <a href="/blog/">
                <div class="cover">
                    <span class="name">墨染红尘</span>
                    <span class="description">堇色流年·追梦少年</span>
                </div>
            </a>
        </div>
        <div class="dropnav icon-paragraph-justify" id="JELON__btnDropNav"></div>
        <ul class="menu hidden" id="JELON__menu">
            
            <li rel="/blog/2019/05/22/Vue/05-自定义指令/index.html" class="item ">
                <a href="/blog/" title="首页" class="icon-home">&nbsp;首页</a>
            </li>
            
        </ul>
        <div class="profile clearfix">
            <div class="feeds fl">
                
                
                <p class="links">
                    
                        <a href="https://github.com/fxiaoyu97" target="_blank">Github</a>
                        |
                    
                        <a href target="_blank">Hosted by Coding Pages</a>
                        
                    
                </p>
                <p class="sns">
                    
                    <a href="javascript: void(0);" class="wechat">
                        <b>■</b>
                        公众号
                        <span class="popover">
                            <img src="/blog/img/wechat_mp.jpg" width="120" height="120" alt="我的微信订阅号">
                            <i class="arrow"></i>
                        </span>
                    </a>
                </p>
                
            </div>
            <div class="avatar fr">
                <img src="/blog/img/avatar.jpg" alt="avatar" title="Jelon">
            </div>
        </div>
    </section>
</header>


    <!-- 博客正文 -->
    <div class="container body clearfix">
        <section class="content">
            <div class="content-main widget">
                <!-- 文章页 -->
<!-- 文章 -->
<article class="post article">
    <header class="text-center">
        <h3 class="post-title"><span>自定义指令</span></h3>
    </header>
    <p class="post-meta text-center">
        Calos 发表于
        <time datetime="2019-05-21T16:00:00.000Z">2019-05-22</time>
    </p>
    <div class="post-content">
        <h2 id="全局指令"><a href="#全局指令" class="headerlink" title="全局指令"></a>全局指令</h2><ul>
<li>使用 <code>Vue.directive()</code>定义全局指令,</li>
<li>参数一：指令名称，定义的时候不需要加 <code>v-</code> 前缀，调用时候必须加上<code>v-指令名称</code></li>
<li>参数二:一个对象，对象身上有一些相关的函数,这些函数在特定的时候，执行相关的操作</li>
</ul>
<h3 id="钩子函数"><a href="#钩子函数" class="headerlink" title="钩子函数"></a><a href="https://cn.vuejs.org/v2/guide/custom-directive.html" target="_blank" rel="noopener">钩子函数</a></h3><p>一个指令定义对象可以提供如下几个钩子函数 (均为可选)：</p>
<ul>
<li><code>bind</code>：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。</li>
<li><code>inserted</code>：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。</li>
<li><code>update</code>：所在组件的 VNode 更新时调用，<strong>但是可能发生在其子 VNode 更新之前</strong>。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">Vue.directive(<span class="string">'focus'</span>,&#123;</span><br><span class="line">    bind: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>)</span>&#123;</span><br><span class="line">        <span class="comment">/* 在这里的focus方法没有作用，因为一个元素只有插入DOM之后，才能获得焦点 */</span></span><br><span class="line">        el.focus()</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    inserted: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>)</span>&#123; </span><br><span class="line">        el.focus()</span><br><span class="line">    &#125;,</span><br><span class="line">    update: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>)</span>&#123;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="钩子函数参数"><a href="#钩子函数参数" class="headerlink" title="钩子函数参数"></a>钩子函数参数</h3><hr>
<blockquote>
<p>指令钩子函数会被传入以下参数：</p>
<ul>
<li><p><code>el</code>：指令所绑定的元素，可以用来直接操作 DOM 。</p>
</li>
<li><p><code>binding</code>：一个对象，包含以下属性：</p>
</li>
<li><p><code>name</code>：指令名，不包括 <code>v-</code> 前缀。</p>
<ul>
<li><code>value</code>：指令的绑定值，例如：<code>v-my-directive=&quot;1 + 1&quot;</code> 中，绑定值为 <code>2</code>。</li>
<li><code>oldValue</code>：指令绑定的前一个值，仅在 <code>update</code> 和 <code>componentUpdated</code> 钩子中可用。无论值是否改变都可用。</li>
<li><code>expression</code>：字符串形式的指令表达式。例如 <code>v-my-directive=&quot;1 + 1&quot;</code>中，表达式为 <code>&quot;1 + 1&quot;</code>。</li>
<li><code>arg</code>：传给指令的参数，可选。例如 <code>v-my-directive:foo</code> 中，参数为 <code>&quot;foo&quot;</code>。</li>
<li><code>modifiers</code>：一个包含修饰符的对象。例如：<code>v-my-directive.foo.bar</code> 中，修饰符对象为 <code>{ foo: true, bar: true }</code>。</li>
</ul>
</li>
<li><p><code>vnode</code>：Vue 编译生成的虚拟节点。移步 <a href="https://cn.vuejs.org/v2/api/#VNode-接口" target="_blank" rel="noopener">VNode API</a> 来了解更多详情。</p>
</li>
<li><p><code>oldVnode</code>：上一个虚拟节点，仅在 <code>update</code> 和 <code>componentUpdated</code> 钩子中可用。</p>
</li>
</ul>
<p>除了 <code>el</code> 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset" target="_blank" rel="noopener"><code>dataset</code></a> 来进行。</p>
</blockquote>
<p>示例代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">Vue.directive(<span class="string">'color'</span>,&#123;</span><br><span class="line">    <span class="comment">//方法里面的参数为形参，可以任意修改，但是建议标准化</span></span><br><span class="line">    bind: <span class="function"><span class="keyword">function</span>(<span class="params">el,binding</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//和样式有关的操作可以放在bind方法里面</span></span><br><span class="line">        <span class="comment">//如果blue不加单引号,浏览器会报错</span></span><br><span class="line">        <span class="built_in">console</span>.log(binding.value);<span class="comment">//显示 blue</span></span><br><span class="line">        <span class="built_in">console</span>.log(binding.expression);<span class="comment">// 'blue'</span></span><br><span class="line"></span><br><span class="line">        el.style.color = binding.value;</span><br><span class="line">    &#125;,</span><br><span class="line">    inserted: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//和js相关的操作,放在该方法里面,因为有些js的操作在挂载节点之前是不会生效的</span></span><br><span class="line">    &#125;,</span><br><span class="line">    update: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>调用<code>color</code>指令的方法</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span>  <span class="attr">v-focus</span> <span class="attr">v-color</span>=<span class="string">"'blue'"</span>/&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>注意：如果这时候<code>blue</code>不加单引号的话，浏览器控制台会报以下错误，而且<code>binding.value</code>的值为<code>undefined</code>，<code>bining.expression</code>的值为<code>blue</code>。</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">vue-2.6.10.js:634 [Vue warn]: Property or method &quot;blue&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. </span><br><span class="line"></span><br><span class="line">(found in &lt;Root&gt;)</span><br></pre></td></tr></table></figure>
<font color="#EE7600"><strong>建议：和样式有关的操作一般放在<code>bind</code>方法里面，和js相关的操作一般放在<code>inserted</code>方法里面。</strong></font>

<hr>
<h2 id="定义私有指令"><a href="#定义私有指令" class="headerlink" title="定义私有指令"></a>定义私有指令</h2><p>操作类似私有过滤器。使用<code>directives:{}</code>在Vue对象内部定义。<strong>注意是复数形式，指令名称与函数体之间是冒号隔开</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> demo = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#demo'</span>,</span><br><span class="line">    data: &#123;</span><br><span class="line">        time: <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;&#125;,</span><br><span class="line">    directives: &#123;</span><br><span class="line">        <span class="string">'setcolor'</span>: &#123;</span><br><span class="line">            bind: <span class="function"><span class="keyword">function</span>(<span class="params">el, binding</span>) </span>&#123;</span><br><span class="line">                el.style.color = binding.value;</span><br><span class="line">            &#125;,</span><br><span class="line">            inserted: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>) </span>&#123;&#125;,</span><br><span class="line">            update: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>) </span>&#123;&#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>此时调用指令，和平常调用指令一样，但是<strong>这个标签也被包含该指令的vue对象接管</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"demo"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-setcolor</span>=<span class="string">"'red'"</span>&gt;</span>&#123;&#123;time&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="函数简写"><a href="#函数简写" class="headerlink" title="函数简写"></a>函数简写</h2><p>在很多时候，你可能想在 <code>bind</code> 和 <code>update</code> 时触发相同行为，而不关心其它的钩子。这时候就可以简写函数，比如下面这样:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">directives: &#123;</span><br><span class="line">    <span class="string">'backgroundcolor'</span>: <span class="function"><span class="keyword">function</span>(<span class="params">el, binding</span>) </span>&#123;</span><br><span class="line">        el.style.backgroundColor = binding.value</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="对象字面量"><a href="#对象字面量" class="headerlink" title="对象字面量"></a>对象字面量</h2><p>如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-demo</span>=<span class="string">"&#123; color: 'white', text: 'hello!' &#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Vue.directive(<span class="string">'demo'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">el, binding</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(binding.value.color) <span class="comment">// =&gt; "white"</span></span><br><span class="line">  <span class="built_in">console</span>.log(binding.value.text)  <span class="comment">// =&gt; "hello!"</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="注意点"><a href="#注意点" class="headerlink" title="注意点"></a>注意点</h2><ul>
<li>全局指令，指令名称和函数体之间是逗号分开的，而私有指令冒号分开的</li>
<li>定义全局指令，也需要定义一个<code>vue</code>对象，用来管理标签</li>
<li>在定义组件命名时，如果组件名称使用驼峰命名，在引用组件时报错，则在引用组件时，把大写的驼峰命名改成小写的字母，同时，两个单词之间，使用<code>-</code>连接。或者命名时全部使用小写字母。</li>
</ul>

    </div>
    <p class="post-meta">
        <span class="post-cat">分类：
            <a class="cat-link" href="/blog/categories/Vue/">Vue</a>
        </span>
        <span class="post-tags">
            标签：
            
    
        <a href="/blog/tags/Vue/" title="Vue">Vue</a>
    

        </span>
    </p>
</article>
<!-- 分享按钮 -->

  <div class="article-share clearfix text-center">
    <div class="share-area">
      <span class="share-txt">分享到：</span>
      <a href="javascript: window.open('http://service.weibo.com/share/share.php?url=' + encodeURIComponent(location.href) + '&title=' + document.title + '&language=zh_cn');" class="share-icon weibo"></a>
      <a href="javascript: alert('请复制链接到微信并发送');" class="share-icon wechat"></a>
      <a href="javascript: window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(location.href) + '&title=' + document.title);" class="share-icon qqzone"></a>
      <a href="javascript: window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(location.href) + '&desc=Jelon个人博客&title=' + document.title + '&callback=' + encodeURIComponent(location.href));" class="share-icon qq"></a>
      <a href="javascript: window.open('http://shuo.douban.com/!service/share?href=' + encodeURIComponent(location.href) + '&name=' + document.title + '&text=' + document.title);" class="share-icon douban"></a>
    </div>
  </div>


<!-- 上一篇/下一篇 -->

<div class="article-nav clearfix">
    
    <span class="prev fl">
        上一篇<br>
        <a href="/blog/2019/05/22/Vue/11-通过ref获取DOM元素和引用组件/">
            
                vue-通过ref获取DOM元素和引用组件
            
        </a>
    </span>
    

    
    <span class="next fr">
        下一篇<br>
        <a href="/blog/2019/05/22/WEB/2019-05-22-什么是路由/">
            
                路由和别名
            
        </a>
    </span>
    
</div>

<!-- 文章评论 -->

  <script src="/blog/js/comment.js"></script>
  <div id="comments" class="comment">
    <!--
    <div class="sign-bar">
      GitHub 已登录!
      <span class="sign-link">登出</span>
    </div>
    <section class="box">
      <div class="com-avatar"><img src="/blog/logo.png" alt="avatar"></div>
      <div class="com-text">
        <div class="main">
          <textarea class="text-area-edited show" placeholder="欢迎评论！"></textarea>
          <div class="text-area-preview"></div>
        </div>
        <div class="switch">
          <div class="switch-item on">编辑</div>
          <div class="switch-item">预览</div>
        </div>
        <div class="button">提交</div>
      </div>
    </section>
    <section class="tips">注：评论支持 markdown 语法！</section>
    <section class="list-wrap">
      <ul class="list">
        <li>
          <div class="user-avatar">
            <a href="/">
              <img src="/img/jelon.jpg" alt="user-avatar">
            </a>
          </div>
          <div class="user-comment">
            <div class="user-comment-header">
              <span class="post-name">张德龙</span>
              <span class="post-time">2017年12月12日</span>
              <span class="like liked">已赞</span>
              <span class="like-num">2</span>
            </div>
            <div class="user-comment-body">333333</div>
          </div>
        </li>
        <li>
          <div class="user-avatar">
            <a href="/">
              <img src="/img/jelon.jpg" alt="user-avatar">
            </a>
          </div>
          <div class="user-comment">
            <div class="user-comment-header">
              <span class="post-name">刘德华</span>
              <span class="post-time">2017年12月12日</span>
              <span class="like">点赞</span>
              <span class="like-num">2</span>
            </div>
            <div class="user-comment-body">vvvvv</div>
          </div>
        </li>
      </ul>
      <div class="page-nav">
        <a href="javascript: void(0);" class="item">1</a>
        <a href="javascript: void(0);" class="item">2</a>
        <a href="javascript: void(0);" class="item current">3</a>
      </div>
    </section>
    -->
  </div>
  <script>
  JELON.Comment({
    container: 'comments',
    label: 'Vue/05-自定义指令' || '2019/05/22/Vue/05-自定义指令/',
    owner: 'fxiaoyu97',
    repo: 'blog_comment',
    clientId: 'fxiaoyu97',
    clientSecret: 'Fsy1179006580@'
  });
  </script>


            </div>

        </section>
        <!-- 侧栏部分 -->
<aside class="sidebar">
    <section class="widget">
        <h3 class="widget-hd"><strong>文章分类</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
    <li>
        <a href="/blog/categories/IDEA/">IDEA</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Nginx/">Nginx</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/地图/">地图</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Java/">Java</a>
        <span class="badge">(6)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Maven/">Maven</a>
        <span class="badge">(2)</span>
    </li>
    
    <li>
        <a href="/blog/categories/web前端/">web前端</a>
        <span class="badge">(2)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Vue/">Vue</a>
        <span class="badge">(31)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Lucene/">Lucene</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/SpringBoot/">SpringBoot</a>
        <span class="badge">(10)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Exception/">Exception</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/MySQL/">MySQL</a>
        <span class="badge">(2)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Spring/">Spring</a>
        <span class="badge">(1)</span>
    </li>
    
</ul>
    </section>

    
    <section class="widget">
        <h3 class="widget-hd"><strong>热门标签</strong></h3>
        <!-- 文章标签 -->
<div class="widget-bd tag-wrap">
  
    <a class="tag-item" href="/blog/tags/IDEA/" title="IDEA">IDEA (1)</a>
  
    <a class="tag-item" href="/blog/tags/快捷键/" title="快捷键">快捷键 (1)</a>
  
    <a class="tag-item" href="/blog/tags/Nginx/" title="Nginx">Nginx (1)</a>
  
    <a class="tag-item" href="/blog/tags/地图/" title="地图">地图 (1)</a>
  
    <a class="tag-item" href="/blog/tags/log4j/" title="log4j">log4j (1)</a>
  
    <a class="tag-item" href="/blog/tags/正则/" title="正则">正则 (1)</a>
  
    <a class="tag-item" href="/blog/tags/JFrame/" title="JFrame">JFrame (1)</a>
  
    <a class="tag-item" href="/blog/tags/爬虫/" title="爬虫">爬虫 (2)</a>
  
    <a class="tag-item" href="/blog/tags/Java/" title="Java">Java (6)</a>
  
    <a class="tag-item" href="/blog/tags/字符串/" title="字符串">字符串 (1)</a>
  
    <a class="tag-item" href="/blog/tags/Maven/" title="Maven">Maven (2)</a>
  
    <a class="tag-item" href="/blog/tags/JavaScript/" title="JavaScript">JavaScript (1)</a>
  
    <a class="tag-item" href="/blog/tags/Vue/" title="Vue">Vue (31)</a>
  
    <a class="tag-item" href="/blog/tags/WebMagic/" title="WebMagic">WebMagic (1)</a>
  
    <a class="tag-item" href="/blog/tags/web前端/" title="web前端">web前端 (3)</a>
  
    <a class="tag-item" href="/blog/tags/HTML/" title="HTML">HTML (1)</a>
  
    <a class="tag-item" href="/blog/tags/webpack/" title="webpack">webpack (12)</a>
  
    <a class="tag-item" href="/blog/tags/Lucene/" title="Lucene">Lucene (1)</a>
  
    <a class="tag-item" href="/blog/tags/SpringBoot/" title="SpringBoot">SpringBoot (9)</a>
  
    <a class="tag-item" href="/blog/tags/注解/" title="注解">注解 (2)</a>
  
    <a class="tag-item" href="/blog/tags/yml/" title="yml">yml (2)</a>
  
    <a class="tag-item" href="/blog/tags/Exception/" title="Exception">Exception (1)</a>
  
    <a class="tag-item" href="/blog/tags/Mysql/" title="Mysql">Mysql (1)</a>
  
    <a class="tag-item" href="/blog/tags/MySQL/" title="MySQL">MySQL (2)</a>
  
    <a class="tag-item" href="/blog/tags/Spring/" title="Spring">Spring (1)</a>
  
    <a class="tag-item" href="/blog/tags/Mybatis/" title="Mybatis">Mybatis (1)</a>
  
</div>
    </section>
    

    

    
</aside>
<!-- / 侧栏部分 -->
    </div>

    <!-- 博客底部 -->
    <footer class="footer">
    &copy;
    
        2016-2019
    

    <a href="/blog/">Todou Loves You</a>
</footer>
<div class="back-to-top" id="JELON__backToTop" title="返回顶部">返回顶部</div>

    <!--博客js脚本 -->
    <!-- 这里放网站js脚本 -->
<script src="/blog/js/main.js"></script>
</body>
</html>